* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    display: block;
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
}

body {
    font-family: Microsoft Yahei, Helvetica, Arial;
    background-color: #f8f8f8;
    overflow-x: hidden;
}

// 图片轮播
.swiper-container1 {
    width: 100%;
    height: 100%;

    .swiper-slide {
        text-align: center;
        font-size: .36rem;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
}

.box {
    background-color: #fff;
    padding: .28rem 0 0 .1rem;
    overflow: hidden;
}

.swiper-container2,
.swiper-container3,
.swiper-container4,
.swiper-container5,
.swiper-container6,
.swiper-container7 {
    .swiper-slide {
        width: 2.05rem !important;
        margin-right: .1rem;

        img {
            width: 100%;
            height: auto;
        }

        div {
            margin-top: .08rem;

            p:nth-of-type(1) {
                font-size: .24rem;
                color: #393939;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
                height: .3rem;
                text-overflow: ellipsis;
                line-height: .3rem;
            }

            p:nth-of-type(2) {
                display: flex;
                align-items: flex-end;
                justify-content: left;
                color: #ff463c;
                margin-top: .08rem;

                span:nth-of-type(1) {
                    font-size: .24rem;
                    margin-left: -0.04rem;
                }

                span:nth-of-type(2) {
                    font-size: .24rem;
                }

                span:nth-of-type(3) {
                    font-size: .2rem;
                }

                span:nth-of-type(4) {
                    background: #f2303c;
                    color: #fff;
                    font-size: .16rem;
                    padding: 1px 3px;
                    margin: 0 0 2px 2px;
                }
            }

            p:nth-of-type(3) {
                font-size: .18rem;
                color: #ff6d34;
                background: url(http://img62.ddimg.cn/upload_img/00775/h5/bookmark-1557296402.png) left .06rem no-repeat;
                background-size: .14rem .16rem;
                padding-left: .2rem;
                margin-top: 0;
                padding-bottom: .1rem;

                span:nth-of-type(1) {
                    font-size: .18rem;
                    color: #ff6d34;
                }

                span:nth-of-type(2) {
                    font-size: .18rem;
                    color: #ff6d34;
                }
            }
        }
    }
}

//顶部导航
.header {
    div {
        height: .88rem;
        background: #fff;
        border-bottom: .02rem solid #d8d8d8;
        display: flex;
        align-items: center;
        justify-content: space-between;

        a:nth-of-type(1) {
            width: .8rem;
            display: flex;
            align-items: center;
            justify-content: center;

            i {
                font-size: .44rem;
            }
        }

        p {
            flex: 1;
            color: #333;
            font-size: .34rem;
            text-align: center;
        }

        a:nth-of-type(2) {
            width: .8rem;
            height: .8rem;
            background: url(https://z.dangdang.com/static/img/menu.3089557.png) center/.46rem .15rem no-repeat;
            transition: all .3s;
        }

        .on {
            background: url(https://z.dangdang.com/static/img/menu-active.c88b7eb.png) center/.32rem no-repeat !important;
            position: relative;
        }

        .on::after {
            content: "";
            position: absolute;
            left: .16rem;
            bottom: -0.12rem;
            width: .5rem;
            height: .28rem;
            background: url(https://z.dangdang.com/static/img/connect.5a33198.png) center/60% no-repeat;
        }
    }

    ul {
        height: 0;
        overflow: hidden;
        transition: all .3s;
        background-color: #eeeeee;
        border-bottom: .02rem solid #d8d8d8;
        display: flex;
        align-items: flex-end;

        li {
            width: 1.5rem;
            color: #4d525d;
            font-size: .24rem;
            text-align: center;

            img {
                display: inline-block;
                width: .44rem;
            }

            i {
                display: inline-block;
            }
        }

        li:nth-of-type(1) {
            i {
                margin-bottom: .04rem;
                font-size: .4rem;
                font-weight: 600;
            }
        }

        li:nth-of-type(2) {
            i {
                margin-bottom: .04rem;
                font-size: .4rem;
                font-weight: normal;
            }
        }

        li:nth-of-type(4) {
            i {
                margin-bottom: -0.1rem;
                font-size: .6rem;
                font-weight: normal;
            }
        }

        li:nth-of-type(5) {
            i {
                margin-bottom: -0.0533rem;
                font-size: .56rem;
                font-weight: normal;
            }
        }
    }

    .show {
        height: .9rem !important;
    }
}

//顶部搜索
.searchTop {
    width: 100%;
    padding: .2rem .25rem;
    background: #fff;

    a {
        height: .6rem;
        padding: 0 14px;
        background: #f5f5f5;
        border-radius: .4rem;
        color: #828282;
        font-size: .24rem;
        line-height: .6rem;
    }
}

// 图片轮播
.swiperImg {
    width: 100%;
    height: 3.15rem;

    .swiper-pagination-bullet-active {
        background: #ff463c;
    }

    img {
        width: 100%;
    }
}

//分类导航
.navClassify {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background: #fff;

    li {
        width: 20%;

        img {
            width: 100%;
            margin: .05rem 0;
        }
    }
}

//文字导航
.navText {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    margin-top: .2rem;
    margin-bottom: .08rem;

    li {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20%;
        height: .8rem;

        a {
            width: 100%;
            color: #000;
            font-size: .24rem;
            text-align: center;
            border-right: .02rem solid rgba($color: #000000, $alpha: 0.5);
        }

        span {
            position: absolute;
            top: .06rem;
            right: 0;
            display: block;
            width: .44rem;
            height: .32rem;
            background: url(http://img61.ddimg.cn/upload_img/00775/h5/hot_icon-1556613430.png) center/100% no-repeat;
        }
    }

    li:nth-of-type(1) {
        height: .8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("https://img62.ddimg.cn/upload_img/00705/yhj/02-5.31-ued.jpg") 50%/100% no-repeat;

        a {
            border-right: none;
        }
    }

    li:nth-of-type(5) {
        a {
            border-right: none;
        }
    }
}

//当当出版
.list1 {
    width: 100%;

    img {
        display: block;
        width: 100%;
    }
}

//新书上架
.list2 {
    width: 100%;

    img:nth-of-type(1) {
        width: 100%;
    }
}

//独家特供
.list3 {
    width: 100%;

    img:nth-of-type(1) {
        width: 100%;
        display: block;
    }
}

//主编推荐
.list4 {
    width: 100%;

    img:nth-of-type(1) {
        width: 100%;
        display: block;
    }
}

//榜单好书
.list5 {
    width: 100%;

    img:nth-of-type(1) {
        width: 100%;
        display: block;
    }

    .swiper-container8 {
        height: .82rem;
        border-top: .02rem solid #e6e6e6;
        border-bottom: .02rem solid #e6e6e6;
        background-color: #fff;

        .swiper-wrapper {
            display: flex;
            align-items: center;
            box-sizing: border-box;

            .swiper-slide {
                color: #505050;
                font-size: .28rem;
                line-height: .8rem;
                padding: 0 .02rem;
                text-align: center;

                span {
                    display: inline-block;
                    height: .78rem;
                }

                .select {
                    color: #e64436;
                    border-bottom: .02rem solid #e53e30;
                }
            }
        }

    }

    .bottom {
        font-size: 0;
        text-align: center;
        padding: .16rem 0;
        background-color: #f2f2f2;

        a {
            display: inline-block;
            height: .52rem;
            line-height: .52rem;
            overflow: hidden;
            padding: 0 .68rem;
            color: #898989;
            font-size: .24rem;
            border: .02rem solid #898989;
            border-radius: .28rem;
        }
    }
}

//底部提示
.list6 {
    position: relative;
    width: 100%;
    margin-bottom: .26rem;
    display: flex;
    align-items: center;
    justify-content: center;

    div {
        position: relative;
        z-index: 2;
        padding: .2rem 0;
        background-color: #f8f8f8;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            position: relative;
            z-index: 2;
            width: .39rem;
            height: .16rem;
            margin-right: .1rem;
        }

        span {
            position: relative;
            z-index: 2;
            color: #9ca8b6;
            font-size: .28rem;
            text-align: center;
        }
    }

    .henxian {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        width: 60%;
        height: .02rem;
        background-color: #d9dfe6;
    }
}

//底部导航
.list7 {
    position: fixed;
    z-index: 99;
    bottom: 0;
    width: 100%;
    background-color: #f5f5f5;
    border-top: .02rem solid #e3e3e3;
    opacity: .99;
    display: flex;
    align-items: center;

    li {
        width: 20%;

        img {
            width: 100%;
        }
    }
}